<template>
  <div class="w">
    <div class="left_publish">
      <div class="headline">
        <h2>发表新攻略</h2>
        <p>分享你的个人游记,让更多人看到哦!</p>
      </div>
      <div class="title">
        <el-input v-model="title" placeholder="请输入标题" style="width:750px;"></el-input>
      </div>
      <div class="textbox">
        <client-only>
          <VueEditor v-model="content" :editor-toolbar="customToolbar" @image-added="imgUpload" />
        </client-only>
      </div>
      <div class="play_City">
        选择城市
        <el-input v-model="city" placeholder="请输入城市" style="width:200px;"></el-input>
      </div>
      <div class="issue">
        <span class="issue_one" @click="valid">发布</span>
        或者
        <span class="issue_two" @click="issue">保存到草稿</span>
      </div>
    </div>
    <div class="right_draft">
      <div class="drafts">草稿箱( {{$store.state.draft.draftList.length}} )</div>
      <div class="grass" v-for="(item,index) in $store.state.draft.draftList" :key="index">
        <div class="list">
          <span class="title" @click="edit(index)">{{item.title}}</span>
          <div class="Modify_delete">
            <span class="date">{{item.date}}</span>
            <span class="el-icon-edit" @click="edit(index)"></span>
            <span class="el-icon-delete" @click=" removeDraft(index) "></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import localStorage from "../../plugins/localStorage";
export default {
  data() {
    return {
      title: "",
      // 城市
      city: "",
      content: "",
      customToolbar: [
        ["bold", "italic", "underline", "strike"],
        // [{ list: "ordered" }, { list: "bullet" }],
        [{ header: 1 }, { header: 2 }],
        ["image"],
      ],
    };
  },
  created() {
    // this.drafts = this.$store.state.draft.draftList.length;
    // this.edits();
  },
  methods: {
    issue() {
      var date = moment(new Date()).format("YYYY-MM-DD");
      this.$store.commit("draft/addDraft", {
        content: this.content,
        title: this.title,
        city: this.city,
        date,
      });
    },
    valid() {
      // if (!this.title || !this.city || !this.content) {
      //   this.$alert("确认删除吗", "提示", {
      //     confirmButtonText: "确定",
      //     callback: (action) => {
      //       this.function();
      //     },
      //   });
      // }
      // return;\
      let data = {
        content: this.content,
        title: this.title,
        city: this.city,
      };
      this.$axios({
        url: "/posts",
        method: "post",
        data,
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
      }).then((res) => {
        console.log(res);
        // this.$message.success(res.data.message);
        this.content = "";
        this.title = "";
        this.city = "";
        alert("上传成功");
      });
    },

    imgUpload(file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData();
      formData.append("files", file);
      this.$axios({
        url: "/upload",
        method: "post",
        data: formData,
      }).then((res) => {
        console.log(res);
        Editor.insertEmbed(
          cursorLocation,
          "image",
          this.$axios.defaults.baseURL + res.data[0].url
        );
        resetUploader();
      });
    },

    edit(index) {
      this.title = this.$store.state.draft.draftList[index].title;
      this.content = this.$store.state.draft.draftList[index].content;
      this.city = this.$store.state.draft.draftList[index].city;
    },
    removeDraft(index) {
      this.$confirm("确认删除该草稿吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.commit("draft/removeDraft", index);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.w {
  width: 1000px;
  margin: 20px auto;
  height: 710px;
  // background: pink;
}
.left_publish {
  float: left;
  width: 750px;
  .headline {
    h2 {
      font-weight: 400;
    }
    p {
      margin-top: 10px;
      font-size: 14px;
      color: #999999;
    }
  }
  .title {
    margin-top: 10px;
  }
  .textbox {
    margin-top: 20px;
    width: 750px;
    height: 500px;
  }
  .issue {
    font-size: 14px;
    margin-top: 20px;
    .issue_one {
      background: #409eff;
      color: white;
      padding: 5px 15px;
      border-radius: 6px;
      cursor: pointer;
    }
    .issue_two {
      color: #ffa500;
      cursor: pointer;
    }
  }
  /deep/.ql-editor {
    height: 430px;
  }
}
.right_draft {
  float: left;
  width: 210px;
  border: 1px solid #ddd;
  margin-left: 18px;
  padding: 10px 10px 20px;
  .list {
    margin: 10px 0;
    font-size: 14px;
    .title:hover {
      color: #fea483;
      text-decoration: underline;
      cursor: pointer;
    }
    .Modify_delete {
      display: flex;
      margin-top: 10px;
      .date {
        flex: 4;
        color: #999999;
      }
      .el-icon-edit {
        flex: 0.5;
        cursor: pointer;
      }
      .el-icon-delete {
        flex: 0.5;
        cursor: pointer;
      }
    }
  }
}
</style>